/**
 * 现代简约蓝绿风格 - 主题变量
 * 创建日期：2025-01-20
 * 风格：专业、干净、现代化
 */

page {
  // 主色调 - 蓝绿色系
  --primary-color: #71ADBA;
  --primary-dark: #5A8B96;
  --primary-light: #8BC4D1;
  --accent-color: #2E4F56;
  
  // 文字颜色
  --text-primary: #2C3E50;
  --text-secondary: #7F8C8D;
  --text-white: #FFFFFF;
  --text-muted: #95A5A6;
  
  // 背景色
  --background: #FFFFFF;
  --background-light: #F8FAFB;
  --background-card: #FFFFFF;
  --background-overlay: rgba(113, 173, 186, 0.1);
  
  // 边框和阴影
  --border-color: #E1E8ED;
  --border-light: #ECF0F1;
  --shadow: 0 8rpx 40rpx rgba(113, 173, 186, 0.15);
  --shadow-card: 0 4rpx 24rpx rgba(113, 173, 186, 0.1);
  --shadow-md: 0 8rpx 32rpx rgba(113, 173, 186, 0.12);
  --shadow-lg: 0 16rpx 60rpx rgba(113, 173, 186, 0.2);
  
  // 圆角
  --border-radius: 16rpx;
  --border-radius-md: 24rpx;
  --border-radius-lg: 32rpx;
  --border-radius-xl: 40rpx;
  
  // 字体大小
  --font-size-xs: 24rpx;
  --font-size-sm: 28rpx;
  --font-size-md: 32rpx;
  --font-size-lg: 36rpx;
  --font-size-xl: 40rpx;
  --font-size-xxl: 48rpx;
  --font-size-3xl: 56rpx;
  
  // 间距
  --spacing-xs: 8rpx;
  --spacing-sm: 16rpx;
  --spacing-md: 24rpx;
  --spacing-lg: 32rpx;
  --spacing-xl: 40rpx;
  --spacing-xxl: 48rpx;
  --spacing-3xl: 64rpx;
  
  // 过渡动画
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;
  
  // 状态颜色
  --success-color: #27AE60;
  --warning-color: #F39C12;
  --error-color: #E74C3C;
  --info-color: #3498DB;
  
  // 渐变
  --primary-gradient: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  --background-gradient: linear-gradient(135deg, var(--background-light), #E8F4F8);
}

// 基础样式类
.modern-page {
  background: var(--background);
  color: var(--text-primary);
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
}

.modern-card {
  background: var(--background-card);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-card);
  border: 2rpx solid var(--border-light);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6rpx;
    background: var(--primary-gradient);
  }
  
  &:hover {
    transform: translateY(-4rpx);
    box-shadow: var(--shadow-lg);
  }
}

.modern-button {
  background: var(--primary-color);
  color: var(--text-white);
  border: none;
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-md);
  font-weight: 600;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-card);
  
  &:hover {
    background: var(--primary-dark);
    box-shadow: var(--shadow-md);
  }
  
  &:active {
    transform: translateY(2rpx);
  }
  
  &.secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2rpx solid var(--primary-color);
    
    &:hover {
      background: var(--primary-color);
      color: var(--text-white);
    }
  }
  
  &.outline {
    background: transparent;
    color: var(--text-primary);
    border: 2rpx solid var(--border-color);
    
    &:hover {
      border-color: var(--primary-color);
      color: var(--primary-color);
    }
  }
}

.modern-input {
  width: 100%;
  padding: var(--spacing-md);
  border: 2rpx solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  background: var(--background);
  transition: all var(--transition-normal);
  
  &:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 6rpx rgba(113, 173, 186, 0.1);
  }
  
  &::placeholder {
    color: var(--text-muted);
  }
}

.modern-text {
  &.title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
  }
  
  &.subtitle {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
  }
  
  &.body {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    line-height: 1.6;
  }
  
  &.caption {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
  }
}

// 动画效果
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in {
  animation: slideIn 0.4s ease-out;
} 